<script lang="ts" setup>
import { ClickEnum } from '@/enum'
import { useStyleStore } from '@/stores/style'
import lineImg from '@/assets/img/line.png'
import charImg from '@/assets/img/char.png'
import circleImg from '@/assets/img/circle.png'
import loveImg from '@/assets/img/love.png'
import marioImg from '@/assets/img/mario.png'
import squareImg from '@/assets/img/square.png'

const styleStore = useStyleStore()
const mouses = [
  {
    label: '24字核心主义价值观',
    value: ClickEnum.CHAR,
    img: charImg
  },
  {
    label: '圆形粒子',
    value: ClickEnum.CIRCLE,
    img: circleImg
  },
  {
    label: '小方块',
    value: ClickEnum.SQUARE,
    img: squareImg
  },
  {
    label: '心型',
    value: ClickEnum.LOVE,
    img: loveImg
  },
  {
    label: '超级玛丽',
    value: ClickEnum.MARIO,
    img: marioImg
  },
  {
    label: '线条',
    value: ClickEnum.LINE,
    img: lineImg
  }
]
</script>

<template>
  <el-container class="p-5 auto-min-column">
    <el-container
      v-for="p in mouses"
      :key="p.label"
      class="aspect-square use-radius-sm flex items-center justify-center tips-parent cursor-pointer relative use-shadow"
    >
      <el-image :src="p.img" class="size-full" />
      <span
        class="absolute -bottom-full duration-500 size-full p-5 flex flex-col items-center justify-between"
      >
        <span class="text-amber-500">
          {{ p.label }}
        </span>
        <a
          class="pt-1 pb-1.5 px-4 text-sm duration-500 bg-amber-500 hover:text-gray-50 rounded-full"
          @click="styleStore.mouse.mouseClickType = p.value"
        >
          立即体验
        </a>
      </span>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.tips-parent {
  & > span {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &:hover {
    & > span {
      bottom: 0;
    }
  }
}

.contrary-box {
  border-radius: 100% 0 0 100% / 100% 100% 0 0;
}
</style>
